<template>
  <div>
    <div class="view-task-detail">
      <div class="view-task-title">
        <px-button type="primary" icon="ArrowLeft" @click="handleGoBack">返回</px-button>
        <div class="text">{{ bacicData.taskName }}</div>
        <px-tag class="ml-2" :type="tagArr[bacicData['taskStatus']]"
          >{{ bacicData["taskStatusDesc"] }}{{ bacicData.timeOut === 1 ? "(超期)" : "" }}</px-tag
        >
        <!-- <div v-show="!!bacicData.taskStatusDesc" class="status">
          <div class="circle" :style="{ backgroundColor: `${TAG_CONFIG[bacicData.taskStatus]?.color}` }" />
          <p :style="{ color: `${TAG_CONFIG[bacicData?.taskStatus]?.color}` }">{{ bacicData.taskStatusDesc }}</p>
          <p v-if="bacicData.timeOut === 1" :style="{ color: '#EF4444', marginLeft: '4px' }">超期</p>
        </div> -->
      </div>
      <div>
        <px-button
          v-if="showActionBtn(bacicData, 'ERC_INSPECT_TASK_CANCEL', 3)"
          v-has="'ERC_INSPECT_TASK_CANCEL'"
          type="primary"
          plain
          @click="emits('handleCancel', bacicData)"
          >取消任务</px-button
        >
        <px-button
          v-show="(bacicData?.taskStatus === 1 || bacicData?.taskStatus === 2) && USER_ROLE.isoperator(bacicData)"
          v-has="'ERC_INSPECT_TASK_TODO'"
          type="primary"
          @click="emits('gotoTaskDetail')"
          >执行任务</px-button
        >
      </div>
    </div>
    <CustomTabs :tabList="tabList" :activeName="activeName" style="margin-bottom: 12px" @tabSelect="handelTabSelected" />
    <TaskForm v-show="activeName === 'task'" :disabled="true" v-model="taskFormValue" :data="bacicData" />
    <PlanForm v-show="activeName === 'plan'" :planNo="bacicData.planNo" :taskNo="bacicData.taskNo" />
    <MaintainTable v-if="activeName === 'maintain'" :data="maintainTableData" />
  </div>
</template>
<script setup lang="ts">
import CustomTabs from "@/components/Tabs/index.vue";
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { TAB_LIST, TAG_CONFIG, USER_ROLE } from "../config";
import MaintainTable from "./MaintainTable.vue";
import PlanForm from "./PlanForm.vue";
import TaskForm from "./TaskForm.vue";
const props = defineProps(["bacicData", "tableData", "tableEqiupSelected", "maintainTableData"]);
const emits = defineEmits(["handleCancel", "gotoTaskDetail", "backMainPage", "refresh"]);
const route = useRoute();
const router = useRouter();
const activeName = ref("task");
const taskFormValue = ref({});
const tagArr = ["info", "warning", "primary", "success", "success", "primary"];
const tabList = computed(() => {
  if (props.maintainTableData.length) {
    return [...TAB_LIST, { name: "maintain", label: "巡检异常信息" }];
  } else {
    return TAB_LIST;
  }
});
// 点击tab显示页面详情
const handelTabSelected = selectName => {
  activeName.value = selectName;
};
// 返回上一级
const handleGoBack = () => {
  if (route.query.taskNo) {
    // 其他页面进入详情，返回其他页面
    router.go(-1);
  } else {
    emits("backMainPage");
  }
};
// 通过任务状态判断是否应该显示指定操作按钮
const showActionBtnByTaskStatus = (status: number, action: string) => {
  const statusConfig = TAG_CONFIG[status];
  if (statusConfig) {
    const flag = statusConfig.actions.includes(action);
    return flag;
  } else {
    return false;
  }
};
const showActionBtn = (data: any, action: string, type: number) => {
  const flag = showActionBtnByTaskStatus(data.taskStatus, action);
  // 计划创建人
  return flag && USER_ROLE.isCreater(data);
};
</script>

<style lang="scss" scoped>
.view-flex {
  position: relative;
  display: flex;
  height: calc(100vh - 260px);
}

.view-mb20 {
  margin-bottom: 20px;
}

.view-task-detail {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;

  .view-task-title {
    display: flex;
    flex-direction: row;
    align-items: center;

    .text {
      margin-left: 20px;
      font-size: 20px;
      font-weight: 600;
      color: rgb(0 0 0 / 90%);
    }

    .status {
      display: flex;
      flex-direction: row;
      align-items: center;

      .circle {
        width: 8px;
        height: 8px;
        margin-right: 5px;
        margin-left: 8px;
        border-radius: 50%;
      }
    }
  }
}

:deep(.inspect-task-detail-content) {
  width: 100%;
  min-width: 500px;
}
</style>
